<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>模块A数量:{{moduleACount}}</div>
    <div>根节点数量:{{rootCount}}</div>
    <div>数量总和:{{countSum}}</div>
    <button @click="addModuleCount">模块A+1</button>
    <button @click="addRootToModule">添加root至模块</button>
</div>
</body>
<script src="../../js/vue.js"></script>
<script src="../../js/vuex.js"></script>
<script type="text/javascript">
    const moduleA={
        state:{
            count:18
        },
        getters:{
            countSum(state,getters,rootState){
                return state.count+rootState.count
            }
        },
        mutations:{
            addModuleCount(state) {
                state.count++
            },
            addModuleByCount(state,payload) {
                state.count=state.count+payload.count
            }
        },
        actions:{
            addRootToModule({state,commit,rootState}){
                commit('addModuleByCount',{count:rootState.count})
            }
        }
    }
    const store=new Vuex.Store({
        modules:{
            a:moduleA,
        },
        state: {
            count:20
        }
    })
    var vm=new Vue({
        el:'#app',
        store,
        computed:{
            countSum(){
                return this.$store.getters.countSum
            },
            moduleACount(){
                return this.$store.state.a.count
            },
            rootCount(){
                return this.$store.state.count
            }
        },
        methods:{
            addModuleCount() {
                this.$store.commit('addModuleCount')
            },
            addRootToModule() {
                this.$store.dispatch('addRootToModule')
            }
        }
    })
</script>
</html>
